<template>
  <view class="balance">
    <u-toast ref="uToast"></u-toast>
    <u-no-network></u-no-network>
    <!-- 导航 -->
    <u-navbar title="账户余额">
      <view class="u-m-r-20" slot="right" @click="goDetail()"> 明细 </view>
    </u-navbar>
    <!-- 内容 -->
    <view class="balance__card bg_4275FE">
      <u-cell-item
        :title="accountData.posProfit.accountName"
        :title-style="{ color: 'white' }"
        :arrow="false"
        :border-bottom="false"
      >
        <u-image
          :src="posThumb"
          width="40"
          height="40"
          slot="icon"
          class="mr-10"
        ></u-image>
      </u-cell-item>
      <view class="mt-20 u-font-13">账户余额（元）</view>
      <view class="u-m-t-10 u-font-16">
        {{ accountData.posProfit.availableBalance }}
      </view>
    </view>
    <view class="balance__card bg_E1B667">
      <u-cell-item
        :title="accountData.activeProfit.accountName"
        :title-style="{ color: 'white' }"
        :arrow="false"
        :border-bottom="false"
      >
        <u-image
          :src="activeThumb"
          width="40"
          height="40"
          slot="icon"
          class="mr-10"
        ></u-image>
      </u-cell-item>
      <view class="mt-20 u-font-13">账户余额（元）</view>
      <view class="u-m-t-10 u-font-16">
        {{ accountData.activeProfit.availableBalance }}
      </view>
    </view>
    <view class="balance__card bg_00D0CB">
      <u-cell-item
        :title="accountData.flowProfit.accountName"
        :title-style="{ color: 'white' }"
        :arrow="false"
        :border-bottom="false"
      >
        <u-image
          :src="flowThumb"
          width="40"
          height="40"
          slot="icon"
          class="mr-10"
        ></u-image>
      </u-cell-item>
      <view class="mt-20 u-font-13">账户余额（元）</view>
      <view class="u-m-t-10 u-font-16">
        {{ accountData.flowProfit.availableBalance }}
      </view>
    </view>
    <view class="balance__card bg_C2A5FA">
      <u-cell-item
        :title="accountData.otherProfit.accountName"
        :title-style="{ color: 'white' }"
        :arrow="false"
        :border-bottom="false"
      >
        <u-image
          :src="otherThumb"
          width="40"
          height="40"
          slot="icon"
          class="mr-10"
        ></u-image>
      </u-cell-item>
      <view class="mt-20 u-font-13">账户余额（元）</view>
      <view class="u-m-t-10 u-font-16">
        {{ accountData.otherProfit.availableBalance }}
      </view>
    </view>
  </view>
</template>
<script>
export default {
  data() {
    return {
      accountData: {
        posProfit: {
          accountName: '',
          availableBalance: '',
        },
        otherProfit: {
          accountName: '',
          availableBalance: '',
        },
        activeProfit: {
          accountName: '',
          availableBalance: '',
        },
        flowProfit: {
          accountName: '',
          availableBalance: '',
        },
      },
      posThumb: '/static/image/home/icon_trans_profit.png',
      activeThumb: '/static/image/home/icon_active_profit.png',
      flowThumb: '/static/image/home/icon_trans_flow.png',
      otherThumb: '/static/image/home/icon_trans_other.png',
    };
  },
  mounted() {
    this.listMyAccount();
  },
  methods: {
    listMyAccount() {
      const _that = this;
      this.$zx.user_api.listMyAccount().then((data) => {
        // console.log('listMyAccount----->110', JSON.stringify(data));
        console.log('listMyAccount----->110', data);
        this.accountData = data;
      });
    },
    goDetail() {
      this.$u.route('pages/mine/balance/balanceList');
    },
  },
};
</script>

<style scoped lang="scss">
.balance {
  &__card {
    margin: 30rpx 30rpx;
    border-radius: 20rpx;
    padding: 20rpx;
    color: white;
  }
}

.white {
  color: white;
}

.u-cell {
  padding: 0;
}

.bg_4275FE {
  background-color: #4275fe;
}

.bg_E1B667 {
  background-color: #e1b667;
}

.bg_00D0CB {
  background-color: #00d0cb;
}

.bg_C2A5FA {
  background-color: #c2a5fa;
}
</style>
